<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%-- Page conteneur, toutes les autres pages sont incluses dans celle-ci--%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>DVD - Bluray | Mayel & Zaghdoudi</title>
        <link rel="stylesheet" type="text/css" media="screen" href="styles/960.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/calendar.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/reset.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/text.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery.ui.selectmenu.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery.ui.stars.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="styles/jquery.rating.css" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Special+Elite" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript" src="scripts/jquery.jeditable.mini.js"></script>
        <script type="text/javascript" src="scripts/functions.js"></script>
        <script type="text/javascript" src="scripts/jquery.ui.stars.js"></script>
        <script type="text/javascript" src="scripts/jquery.rating.js"></script>
        <script type="text/javascript" src="scripts/jquery.ui.selectmenu.js"></script>
        <script type="text/javascript">
            $(function() {
                $('a[rel*=external]').click(function() {
                    window.open(this.href);
                    return false;
                });

                $.ajax({
                    url: 'XMLServlet?view=keywords',
                    dataType: 'xml',
                    success: function(xml) {
                        var data = $('keyword', xml).map(function() {
                            return {
                                label: $(this).text(),
                                category: $(this).attr('category')
                            };
                        }).get();
                        
                        $('input[name=keyword]').catcomplete({
                            delay: 0,
                            minLength: 3,
                            position: { my : 'right top', at: 'right bottom' },
                            source: data,
                            select: function(event, ui) {
                                $(this).val(ui.item.value);
                                $('#search').submit();
                            }
                        });
                    }
                });

                // image de dvd glissable (drag)
                $('.draggable').draggable({
                    appendTo: 'body',
                    cursorAt: {
                        cursor: 'crosshair',
                        right: -5,
                        top: -5
                    },
                    helper: 'clone',
                    revert: true
                });

                // le panier est déposable (drop)
                $('.droppable').droppable({
                    activeClass: 'ui-state-hover',
                    drop: function(event, ui) {
                        $.ajax({
                            url: 'AjaxServlet',
                            data: 'action=addToCart&jeuvideoId=' + ui.draggable.attr('id'),
                            success: function(r) {
                                $('#addCartMsg').fadeIn(2000);
                                $('#addCartMsg').fadeOut(2000);
                                $('#fullCart').show();
                                $('#emptyCart').hide();
                                $('#totalPrice').html(r);
                            }
                        });
                    }
                });

                $('#search').submit(function() {
                    var val = $('input[name=keyword]').val();
                    return (val.length >= 3 && val != 'Type your keyword');
                });

            <c:choose>
                <c:when test="${!empty utilisateur.panier.ligneDePanier}">
                            $('#emptyCart').hide();
                </c:when>
                <c:otherwise>
                            $('#fullCart').hide();
                </c:otherwise>
            </c:choose>
                    });
        </script>
    </head>
    <body>
        <div id="wrap">
            <%-- Identifiant et panier--%>
            <div id="main" class="container_16">
                <div id="header" class="grid_16">
                    <div id="logo" class="grid_8 alpha">
                        <h1><a href="?page=home" title="World of Video Games">DVD - Bluray</a></h1>
                        <h3>Mayel & Zaghdoudi</h3>
                    </div>
                    <div id="headright">
                        <c:choose>
                            <%-- Si l'utilisateur n'est pas connecté, on lui propose de se connecter--%>
                            <c:when test="${utilisateur == null}">
                                <h3 class="login"><a href="?page=login" title="Sign up">Sign up / Login</a></h3>
                            </c:when>
                            <%-- Sinon, on affiche son identifiant et son panier avec la quantité et le prix--%>
                            <c:otherwise>
                                <%-- calcul du total du panier--%>
                                <c:set var="grandTotal" value="0" scope="application" />
                                <c:forEach var="lp" items="${utilisateur.panier.ligneDePanier}" >
                                    <c:set var="grandTotal" value="${grandTotal + lp.d.price * lp.quantite}" scope="application" />
                                </c:forEach>
                                <h3 class="login"><a href="?page=account" title="My Account">${utilisateur.email}</a> / <a href="?page=account&action=logout" title="Logout">Logout</a></h3>
                                <div class="droppable">
                                    <a href="?page=shoppingcart" title="My Shopping Cart" class="cart"><img src="images/cart_blue.png" alt="My Shopping Cart" /></a>
                                    <label id="addCartMsg">Game added</label>
                                    <span id="fullCart">
                                        <label>Total: $<span id="totalPrice"><fmt:formatNumber value="${grandTotal}" pattern="###,###.##" /></span></label><br />
                                        <a href="?page=checkout" title="Checkout"><img src="images/checkoutcart.png" alt="Checkout" width="90" /></a>
                                    </span>
                                    <span id="emptyCart">
                                        <label>Drag game's jacket here!</label>
                                    </span>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <%-- Menu horizontal et barre de recherche--%>
                <div id="mainMenu" class="grid_16">
                    <%-- barre de recherche--%>
                    <div class="search">
                        <c:choose>
                            <c:when test="${param.keyword != null && !empty param.keyword}">
                                <c:set var="keyword" value="${param.keyword}" />
                            </c:when>
                            <c:otherwise>
                                <c:set var="keyword" value="Type your keyword" />
                            </c:otherwise>
                        </c:choose>
                        <form action="" method="get" id="search">
                            <fieldset>
                                <input type="hidden" name="page" value="search" />
                                <input type="text" value="${keyword}" name="keyword" onfocus="if (this.value == 'Type your keyword') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Type your keyword';}" /><input type="submit" value="Search" />
                            </fieldset>
                        </form>
                    </div>
                    <%-- variable pour l'onglet actif--%>
                    <c:choose>
                        <c:when test="${param.page == null || empty param.page || param.page == 'home'}">
                            <c:set var="active_home" value="class=\"aActive\"" />
                        </c:when>
                        <c:when test="${param.page == 'categories'}">
                            <c:set var="active_categories" value="class=\"aActive\"" />
                        </c:when>
                        <c:when test="${param.page == 'ratings'}">
                            <c:set var="active_ratings" value="class=\"aActive\"" />
                        </c:when>
                        <c:when test="${param.page == 'shoppingcart'}">
                            <c:set var="active_shoppingcart" value="class=\"aActive\"" />
                        </c:when>
                        <c:when test="${param.page == 'account'}">
                            <c:set var="active_account" value="class=\"aActive\"" />
                        </c:when>
                    </c:choose>
                    <ul class="dropdown">
                        <%-- home--%>
                        <li><a href="?page=home" title="Home" ${active_home}>Home</a></li>
                        <%-- menu déroulant contenant toutes les catégories--%>
                        <li>
                            <a href="?page=categories" title="Categories" ${active_categories}>Categories</a>
                            <ul>
                                <c:forEach var="c" items="${requestScope.dd_categories}">
                                    <c:if test="${param.page == 'categories' && param.id == c.id}">
                                        <c:set var="active" value="class=\"aActive\"" />
                                    </c:if>
                                    <li><a href="?page=categories&amp;id=${c.id}" title="${c.name}" ${active}>${c.name}</a></li>
                                    <c:remove var="active" />
                                </c:forEach>
                            </ul>
                        </li>
                        <%-- Age ratings--%>
                        <li><a href="?page=ratings" title="Age Ratings" ${active_ratings}>Age Ratings</a>
                            <ul>
                                <c:forEach var="c" items="${requestScope.dd_ratings}">
                                    <c:if test="${param.page == 'categories' && param.id == c.id}">
                                        <c:set var="active" value="class=\"aActive\"" />
                                    </c:if>
                                    <li><a href="?page=ratings&amp;id=${c.id}" title="${c.name}" ${active}>${c.name}</a></li>
                                    <c:remove var="active" />
                                </c:forEach>
                            </ul>
                        </li>
                        <%-- Si l'utilisateur est connecté, on ajoute les onglets "My shopping cart" et "My Account" --%>
                        <c:if test ="${utilisateur != null}">
                            <%-- My shopping cart--%>
                            <li><a href="?page=shoppingcart" title="Your Shopping Cart" ${active_shoppingcart}>My Shopping Cart</a></li>
                            <%-- My account et menu déroulant avec les adresses, les informations du compte,
                                 la déconnexion et éventuellement l'administration--%>
                            <li>
                                <a href="?page=account" title="My Account" ${active_account}>My Account</a>
                                <ul>
                                    <li><a href="?page=account&view=orders" title="My Orders">My Orders</a></li>
                                    <c:if test="${utilisateur.admin}">
                                        <li><a href="admin" rel="external">Administration</a></li>
                                    </c:if>
                                    <li><a href="?page=account&action=logout" title="Logout">Logout</a></li>
                                </ul>
                            </li>
                        </c:if>
                    </ul>
                </div>
                <div class="clear"></div>
                <%-- intégration de la page du parametre--%>
                <c:choose>
                    <c:when test="${param.page != null && !empty param.page && param.page != 'home'}">
                        <c:catch var="e">
                            <c:import url="${param.page}.jsp" />
                        </c:catch>
                        <c:if test="${!empty e}">
                            <c:import url="error.jsp" />
                        </c:if>
                    </c:when>
                    <c:otherwise>
                        <c:import url="default.jsp" />
                    </c:otherwise>
                </c:choose>
            </div>
            <div class="clear"></div>
        </div>
        <%-- pied de page--%>
        <div id="footer">
            <div class="container_16">
                <div class="footMenu grid_16">
                    <p>
                        <span>Copyright &copy; 2012 <a href="?page=home" title="World of Video Games">DVD - Bluray</a> designed by <a href="http://www.tokokoo.com/" title="Tokokoo - Premium WordPress e-Commerce themes" rel="external">Tokokoo</a> and brought to you by <a href="http://www.instantshift.com/" title="InstantShift - Web Designers and Developers Daily Resource" rel="external">InstantShift</a></span>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </body>
</html>